

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */



                         /* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots hav a minimum width of 75 pixels and if there is room they will grow and occupy 10% of the scrollable area (20% combined).Adjust it to your own taste. */

min-width: 75px;
width: 9%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */

background-image: url(http://2.bp.blogspot.com/-QGItirtVCRI/TqplugOrg_I/AAAAAAAAAEE/1rXmDgC8Gfs/s1600/big+transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index:2;
left: 0;
	
/*  The first cursor url is for Firefox and other browsers, the second is for Internet Explorer */
	
cursor: url(http://4.bp.blogspot.com/-jscyPlrmCac/Tqpl0Ast38I/AAAAAAAAAEM/G9BIz8_LBpg/s1600/cursor_arrow_left.png), url(http://itg-js-n-css.googlecode.com/svn/trunk/image/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */

div.scrollingHotSpotLeftVisible
{
background-image: url(http://4.bp.blogspot.com/-8gSc0XW4w4U/Tqpll8GbP-I/AAAAAAAAAD0/w2YQiCW0-dQ/s1600/arrow_left.gif);				
background-color: #fff;
background-repeat: no-repeat;
/* Standard CSS3 opacity setting */
opacity: 0.30; 
/* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
-moz-opacity: 0.30;
/* Opacity for Internet Explorer. */
filter: alpha(opacity = 35);
/* Use zoom to Trigger "hasLayout" in Internet Explorer 6 or older versions */	
zoom: 1; 
}


/* Invisible right hotspot */

div.scrollingHotSpotRight
{
min-width: 75px;
width: 5%;
height: 100%;
background-image: url(http://2.bp.blogspot.com/-QGItirtVCRI/TqplugOrg_I/AAAAAAAAAEE/1rXmDgC8Gfs/s1600/big+transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index:2;
right: 0;
cursor: url(http://3.bp.blogspot.com/-frIybR4_MbI/Tqpl7kvixQI/AAAAAAAAAEU/pHYVp13dxkA/s1600/cursor_arrow_right.png), url(http://itg-js-n-css.googlecode.com/svn/trunk/image/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(http://1.bp.blogspot.com/-tO6cVLOX0c4/TqplpzeCYCI/AAAAAAAAAD8/TsIzT3dfAVE/s1600/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.30;
filter: alpha(opacity = 30);
-moz-opacity: 0.30;
zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).Overflow is hidden because you don't want to show all of the scrollable area */

div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}

div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}

/* End smooth scroller css part */